<template lang="html">
  <div class="">
    <div class="add">
      <el-button type="primary" @click="add">新增注意事项</el-button>
    </div>
    <tableVue :list="list" :state="false" v-loading="pageData.loading" :pagination="true">
        <slot>
          <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="compile(scope.row)">编辑
                </el-button>
                <el-button
                  size="mini"
                  type="danger"
                  class="del"
                  @click="del(scope.row,2)">删除</el-button>
              </template>
          </el-table-column>
        </slot>
    </tableVue>
      <dialogVue title="操作" :dialog="dialog" @close="changeData" :state="false">
          <slot>
              <el-form :model="pageData" ref="ruleForm" label-width="160px" class="demo-ruleForm">
                  <el-form-item label="注意事项示例描述">
                    <el-input v-model="pageData.carefulDescs" placeholder="请输入内容"></el-input>
                 </el-form-item>
                 <el-form-item label="图片" prop="imgUrl">
                       <el-upload
                        class="upload-demo"
                        :auto-upload='false'
                        :on-change="upload"
                        :file-list="pagefileUrl"
                        :on-exceed	= "exceed"
                        :limit="1"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :list-type="String"
                        list-type="picture">
                        <el-button size="small" type="primary">点击上传</el-button>
                      </el-upload>
                 </el-form-item>
                 <el-form-item class="confirm">
                    <el-button type="primary" v-if="btnState == '1'" @click="addOption('post')">提交</el-button>
                    <el-button type="primary" v-if="btnState == '2'" @click="addOption('put')">更新</el-button>
                 </el-form-item>
              </el-form>
          </slot>
      </dialogVue>
  </div>
</template>

<script>
import Data from './noticeData.js'
import dialogVue from '@/components/dialog.vue'
import tableVue from '@/components/alltable.vue'
import {
  noticeList,
  addnotice,
  delnotice
} from "@/api/product/product";
export default {
  components : {
    tableVue,
    dialogVue
  },
  data () {
    return JSON.parse(JSON.stringify(Data))
  },
  mounted () {
    this.getNoticeList();
  },
  methods : {
    getNoticeList () {
      noticeList(JSON.parse(this.$route.query.item)).then(res=>{
        if (res.data.code == 'OK') {
          this.list.tbody = res.data.data.map(item=>{
            item.gmtCreate = this.switchTime(item.gmtCreate);
            item.gmtUpdate = this.switchTime(item.gmtUpdate);
            return item;
          });
        }
      })
    },
    upload (file,fileList) {//拿到图片的地址
         let reader = new FileReader();
         reader.readAsDataURL(file.raw);
         reader.onload =  () => {
           this.pageData.pageImgUrl = reader.result.split(',')[1];
         }
    },
    exceed () {
      this.$message.error('只能传一张图片');
    },
    changeData (data) {
      this.dialog = data;
    },
    add () {
        this.pageData = {};
        this.pagefileUrl = [];
        this.dialog = true;
        this.btnState = '1';

    },
    compile (item) {
        this.pagefileUrl = [];
        this.pageData.carefulDescs = item.carefulDesc;
        this.pageData.carefulId = item.carefulId
        this.dialog = true;
        this.btnState = '2'
        this.pagefileUrl.push({
          name : '',
          url : item.carefulPicture
        })
    },
    del (item) {//删除条件
      this.delMessage(()=>{
        delnotice(item.carefulId).then(res=>{
          if (res.data.code == 'OK') {
            this.$message.success('删除成功');
              this.getNoticeList();
          } else {
            this.$message.error(res.data.message);
          }
        })
      })
    },
    addOption (method) {
      var data = {
        productId :JSON.parse(this.$route.query.item),
        carefulDesc : this.pageData.carefulDescs,
        carefulPicture : this.pageData.pageImgUrl,
        carefulId : this.pageData.carefulId
      }
      addnotice (data,method).then(res=>{
        if (res.data.code == 'OK') {
          this.getNoticeList();
            this.dialog = false;
          if (method == 'post') {
            this.$message.success('新增成功');
          } else {
            this.$message.success('编辑成功');
          }
        } else {
            this.$message.error(res.data.message);
        }
      })
    }
  }
}
</script>

<style scoped>
.confirm {
  position: absolute;
  bottom: -1px;
  right: 100px;
}
</style>
